import { IRouteComponentProps, useDispatch, useSelector } from "umi";
import styles from "./index.less";
import { Card, Modal, Input, Popconfirm, message } from 'antd';
import { useEffect, useState } from "react";
const { TextArea } = Input;
import {
  GithubOutlined,
  CopyrightOutlined,
} from '@ant-design/icons';
// import Footer from '@/components/Footer'
const { Meta } = Card;

const IndexPage: React.FC<IRouteComponentProps> = (props) => {
  let [user, setUserState] = useState(JSON.parse(localStorage.getItem("user") as string));
  const state = useSelector((state: { home: any }) => state.home);
  // 点击删除确定
  const confirm = (e: any) => {
    console.log(e);
    message.success('Click on Yes');
  }
  // 点击删除取消啊
  const cancel = (e: any) => {
    console.log(e);
    message.error('Click on No');
  }
  // 触发两个接口
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch({
      type: "home/query",
    })
    dispatch({
      type: "home/comment",
    })
  }, [])
  // 定义回复弹框的开关
  const [isModalVisible, setIsModalVisible] = useState(false);
  // 回复显示函数
  const showModal = () => {
    setIsModalVisible(true);
  };
  // 回复确定函数
  const handleOk = () => {
    setIsModalVisible(false);
  };
  // 回复取消函数
  const handleCancel = () => {
    setIsModalVisible(false);
  };
  console.log(state.commentLisr)
  return (
    <div className={styles.allCount}>
      <div className={styles.header}>
        <div>工作台</div>
        <h1>您好,{user.name}</h1>
        <p>您的角色:HR</p>
      </div>
      <div className={styles.main11}>
        <div className={styles.con1}>
          <p><span>快速导航</span></p>
          <div>
            <span>文章管理</span>
            <span>评论管理</span>
            <span>文件管理</span>
            <span>用户管理</span>
            <span>访问管理</span>
            <span>系统设置</span>
          </div>
        </div>
        <div className={styles.con2}>
          <p><span>最新文章</span><span>全部文章</span></p>
          <div className={styles.bbox1}>{
              state.artiList && state.artiList.map((item: { cover: string | undefined, title: string }, index: any) => {
                return <div key={index}>
                  <Card hoverable cover={<img alt="example" src={item.cover} />}>
                    <Meta style={{ textAlign: "center" }} title={item.title} />
                  </Card>
                </div>
              })}
          </div>
        </div>
        <div className={styles.con3}>
          <p><span>最新文章</span><span>全部文章</span></p>
          <div className={styles.bbox2}>{
              state.commentLisr && state.commentLisr.map((item: any, index: any) => {
                return <div key={index}>
                  <div className={styles.left} >
                    <span> {item.content}</span>  在 <span>文章 </span>   评论 <span>查看内容</span> <span>·</span> 未通过
                  </div>
                  <div className={styles.right}>
                    <span>通过</span>
                    <span>拒绝</span>
                    <span onClick={showModal}>回复</span>
                    <span><Popconfirm title="确定要删除吗?" onConfirm={confirm} onCancel={cancel} okText="确定" cancelText="取消"><a href="#">删除</a></Popconfirm></span>
                  </div>
                </div>
              })}
          </div>
        </div>
        <Modal title="请输入回复内容" cancelText="取消" okText="回复" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
          <TextArea rows={4} placeholder="可支持MAdow文本" />
        </Modal>
      </div>
    </div>
  );
}

export default IndexPage
